﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ujtopo-显示视图</title>
    <meta charset="utf-8" />
    <link rel="Shortcut Icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png"> IE地址栏前换成自己的图标
    <link rel="Bookmark" href="favicon.png"> 可以在收藏夹中显示出你的图标
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <header class="main-header">
            <!-- Logo -->
            <a href="#" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>ujtopo</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>ujtopo</b></span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span style="line-height:15px;color:white;font-size:20px;">陪伴是最长情的告白</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- Messages: style can be found in dropdown.less-->
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                基于jTopo的拓扑图设计工具库
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="Images/ujtopo/net-yuan.png" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>net-yuan</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                    </div>
                </div>
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="treeview active menu-open">
                        <a href="http://net-yuan.com" target="_blank">
                            <i class="fa fa-shower"></i> <span>ujtopo</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="http://net-yuan.com" target="_blank"><i class="fa fa-heart"></i> net-yuan主页</a></li>
                            <li class="active"><a href="about.html"><i class="fa fa-cube"></i> ujtopo-简介</a></li>
                            <li><a href="designer.html"><i class="fa fa-rocket"></i> ujtopo-设计视图</a></li>
                            <li><a href="index.html"><i class="fa fa-sitemap"></i> ujtopo-显示视图</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <ol class="breadcrumb" style="top:3px;">
                    <li><a href="#"><i class="fa fa-shower"></i> net-yuan</a></li>
                    <li class="active">ujtopo</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <!-- Default box -->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">ujtopo简介</h3>
                    </div>
                    <div class="box-body">
                        <ol style="font-weight:bold">一、ujtopo是什么？</ol>
                        <ol>ujtopo是基于jTopo的拓扑图设计工具库</ol>
                        <ol style="font-weight:bold">二、jtopo是什么？</ol>
                        <ol>
                            jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。

                            jTopo关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。

                            使用jTopo很简单，可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系，都可以使用jTopo来进行人性化、图形化的展示。

                            jTopo的目标：1.简单好用 2.灵活扩展 3.轻松开发出类似Visio、在线脑图、UML建模等类似工具 4.为大数据可视化提供解决方案。
                        </ol>
                        <ol>
                            jTopo官方网址:
                            <a href="http://www.jtopo.cn" target="_blank">http://www.jtopo.cn</a>
                        </ol>
                        <div class="row">
                            <div class="col-lg-4">
                                <ol style="font-weight:bold">三、ujtopo特点：</ol>
                                <ol>1、完全开源免费</ol>
                                <ol>2、分为设计视图和显示视图，设计视图中可以选择线形，（直线、折线、反折线，后面还可以增加曲线、二次折线等）、选择线条颜色</ol>
                                <ol>3、节点数据增加id和type以及唯一标识uid，可以为不同类型的节点定义不同的行为</ol>
                                <ol>4、节点数据和连接数据可以保存</ol>
                                <ol>5、可以从数据源读取节点数据和连接数据，解析数据，显示拓扑图形</ol>
                                <ol>6、支持告警显示(待扩展)</ol>

                                <ol style="font-weight:bold">四、Demo说明</ol>
                                <ol>1、本示例使用js+css+html，因此任何开发语言都可以在此基础上修改以实现功能。</ol>
                                <ol>2、本示例使用的jTopo版本是0.4.8，如果对jTopo有任何问题，可以联系jTopo作者，请支持原创。</ol>
                                <ol>3、本示例的节点和连接数据使用localStorage存储。</ol>
                                <ol>4、本示例仅作演示使用。</ol>

                                <ol style="font-weight:bold">五、联系方式</ol>
                                <ol>Email：2253972318@qq.com</ol>
                                <ol>QQ：2253972318</ol>
                                <ol>GitHub：<a href="https://github.com/SmartOfLife" target="_blank">https://github.com/SmartOfLife</a></ol>
                                <ol>网址:<a href="http://net-yuan.com" target="_blank">http://net-yuan.com</a></ol>
                                <ol><img src="Images/weichart.png" /></ol>
                            </div>
                            <div class="col-lg-8">
                                <img src="Images/ujtopo.png" />
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 1.0.0
            </div>
            <strong>Copyright &copy; 2018 by SmartLife 网缘(<a href="http://net-yuan.com" target="_blank">net-yuan</a>) </strong>
        </footer>
    </div>
</body>
</html>

<script src="Scripts/jquery/jquery-3.1.1.min.js"></script>
<script src="Scripts/bootstrap/bootstrap.min.js"></script>
<script src="Scripts/adminLte/adminlte.js"></script>

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/AdminLTE.min.css" rel="stylesheet" />
<link href="Content/skins/_all-skins.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />